#import-export-accounts-container {
  background-color: var(--bg-faded-color);

  section {
    display: flex;
    gap: 8px;
    align-items: stretch;
    padding: 8px 0 0;

    > .section-button {
      background-color: var(--bg-color);
      border-radius: 16px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      align-items: center;
      padding: 12px;

      .icon {
        transition: transform 0.2s ease-in-out;
      }

      &.button-import:is(:hover, :active, .drag-over) .icon {
        transform: translateY(2px);
      }
      &.drag-over {
        background-color: var(--bg-color);
        box-shadow: 0 0 0 2px var(--link-color) inset;
      }
      &.button-export:is(:hover, :active) .icon {
        transform: translateY(-2px);
      }
    }
  }
}
